<template>
  <div class="about-page">
    <!-- 头部横幅 -->
    <section class="hero-banner">
      <div class="container">
        <h1 class="hero-title">关于智盾清源</h1>
        <p class="hero-subtitle">信息透明 · 科技护航</p>
      </div>
    </section>

    <!-- 平台概述 -->
    <section class="overview-section">
      <div class="container">
        <div class="overview-content">
          <div class="overview-text">
            <h2 class="section-title">平台简介</h2>
            <p class="overview-description">
              智盾清源（ShieldPurity）是一个综合性的信息真实性验证与反诈骗平台，致力于应对数字时代的各种欺诈和虚假信息挑战。
              平台集成了先进的深度学习模型，包括基于ResNet50的图像分析、XLNet的文本理解以及专业的音频和视频处理技术，
              为用户提供全方位的信息可信度评估服务。
            </p>
            <div class="platform-stats">
              <div class="stat-item">
                <div class="stat-value">2023</div>
                <div class="stat-label">成立年份</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">500万+</div>
                <div class="stat-label">服务用户</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">98.5%</div>
                <div class="stat-label">检测准确率</div>
              </div>
            </div>
          </div>
          <div class="overview-image">
            <div class="platform-illustration">
              <div class="tech-icon">🛡️</div>
              <div class="ai-icon">🤖</div>
              <div class="detection-icon">🔍</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 使命愿景 -->
    <section class="mission-section">
      <div class="container">
        <div class="mission-vision-grid">
          <div class="mission-card">
            <div class="card-icon">🎯</div>
            <h3 class="card-title">我们的使命</h3>
            <p class="card-description">
              通过先进的人工智能技术，为用户构建一个可信赖的信息环境，帮助用户在信息爆炸的时代辨别真伪，防范各类诈骗风险。
            </p>
          </div>
          <div class="vision-card">
            <div class="card-icon">🌟</div>
            <h3 class="card-title">我们的愿景</h3>
            <p class="card-description">
              成为全球领先的多模态AI反诈与信息验证平台，构建数字时代的信息安全堡垒，让每个人都能在安全、可信的网络环境中生活和工作。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术架构 -->
    <section class="technology-section">
      <div class="container">
        <h2 class="section-title">技术架构</h2>
        <div class="tech-grid">
          <div class="tech-category" v-for="category in techCategories" :key="category.id">
            <h3 class="tech-category-title">{{ category.title }}</h3>
            <ul class="tech-list">
              <li v-for="tech in category.technologies" :key="tech" class="tech-item">
                {{ tech }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 团队介绍 -->
    <section class="team-section">
      <div class="container">
        <h2 class="section-title">核心团队</h2>
        <div class="team-grid">
          <div class="team-member" v-for="member in teamMembers" :key="member.id">
            <div class="member-avatar">
              <div class="avatar-placeholder">{{ member.name.charAt(0) }}</div>
            </div>
            <h3 class="member-name">{{ member.name }}</h3>
            <p class="member-position">{{ member.position }}</p>
            <p class="member-description">{{ member.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程 -->
    <section class="timeline-section">
      <div class="container">
        <h2 class="section-title">发展历程</h2>
        <div class="timeline">
          <div class="timeline-item" v-for="milestone in milestones" :key="milestone.id">
            <div class="timeline-date">{{ milestone.date }}</div>
            <div class="timeline-content">
              <h3 class="timeline-title">{{ milestone.title }}</h3>
              <p class="timeline-description">{{ milestone.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-section">
      <div class="container">
        <h2 class="section-title">联系我们</h2>
        <div class="contact-grid">
          <div class="contact-info">
            <h3 class="contact-title">联系方式</h3>
            <div class="contact-item">
              <div class="contact-icon">📧</div>
              <div class="contact-details">
                <div class="contact-label">邮箱</div>
                <div class="contact-value">support@shieldpurity.com</div>
              </div>
            </div>
            <div class="contact-item">
              <div class="contact-icon">📞</div>
              <div class="contact-details">
                <div class="contact-label">电话</div>
                <div class="contact-value">400-123-4567</div>
              </div>
            </div>
            <div class="contact-item">
              <div class="contact-icon">📍</div>
              <div class="contact-details">
                <div class="contact-label">地址</div>
                <div class="contact-value">北京市海淀区中关村大街1号</div>
              </div>
            </div>
          </div>
          <div class="contact-form">
            <h3 class="contact-title">留言反馈</h3>
            <form @submit.prevent="submitFeedback">
              <div class="form-group">
                <input 
                  type="text" 
                  v-model="feedback.name" 
                  placeholder="您的姓名"
                  class="form-input"
                  required
                >
              </div>
              <div class="form-group">
                <input 
                  type="email" 
                  v-model="feedback.email" 
                  placeholder="您的邮箱"
                  class="form-input"
                  required
                >
              </div>
              <div class="form-group">
                <textarea 
                  v-model="feedback.message" 
                  placeholder="您的留言"
                  class="form-textarea"
                  required
                ></textarea>
              </div>
              <button type="submit" class="submit-btn">发送留言</button>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      feedback: {
        name: '',
        email: '',
        message: ''
      },
      
      // 技术架构数据
      techCategories: [
        {
          id: 1,
          title: '前端技术',
          technologies: [
            'Vue.js 3.0',
            'Element Plus',
            'ECharts',
            'WebGL',
            'PWA技术'
          ]
        },
        {
          id: 2,
          title: '后端技术',
          technologies: [
            'Python Django',
            'Redis缓存',
            'MongoDB',
            'PostgreSQL',
            'Docker部署'
          ]
        },
        {
          id: 3,
          title: 'AI算法',
          technologies: [
            'ResNet50图像分析',
            'XLNet文本理解',
            'CNN+LSTM视频分析',
            '声纹识别算法',
            '多模态融合技术'
          ]
        },
        {
          id: 4,
          title: '部署架构',
          technologies: [
            'Kubernetes集群',
            '弹性扩展',
            '负载均衡',
            '微服务架构',
            '云原生部署'
          ]
        }
      ],
      
      // 团队成员数据
      teamMembers: [
        {
          id: 1,
          name: '张xx',
          position: '技术总监',
          description: '具有AI算法研发经验，专注于深度学习和计算机视觉技术'
        },
        {
          id: 2,
          name: '李xx',
          position: '产品经理',
          description: '具有产品设计经验，擅长用户体验设计和产品规划'
        },
        {
          id: 3,
          name: '王xx',
          position: '算法工程师',
          description: '专注于自然语言处理和多模态AI技术研发'
        },
        {
          id: 4,
          name: '刘xx',
          position: '安全专家',
          description: '网络安全和反诈骗技术专家，负责平台安全架构设计'
        }
      ],
      
      // 发展历程数据
      milestones: [
        {
          id: 1,
          date: '2023年1月',
          title: '平台立项',
          description: '智盾清源项目正式启动，组建核心技术团队'
        },
        {
          id: 2,
          date: '2023年6月',
          title: '核心算法完成',
          description: '完成谣言检测和反诈骗核心算法开发，准确率达到90%以上'
        },
        {
          id: 3,
          date: '2024年5月',
          title: '平台上线',
          description: '智盾清源平台正式上线，开始为用户提供服务'
        },
        {
          id: 4,
          date: '2024年12月',
          title: '功能扩展',
          description: '新增AI内容识别和声纹识别功能，服务能力全面升级'
        },
        {
          id: 5,
          date: '2024年12月',
          title: '用户突破',
          description: '平台用户数突破500万，日检测量达到100万次'
        }
      ]
    }
  },
  methods: {
    submitFeedback() {
      // 模拟提交反馈
      console.log('提交反馈:', this.feedback)
      alert('感谢您的反馈！我们会尽快回复您。')
      
      // 清空表单
      this.feedback = {
        name: '',
        email: '',
        message: ''
      }
    }
  }
}
</script>

<style scoped>
.about-page {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部横幅 */
.hero-banner {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.hero-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size: 24px;
  color: #ffd700;
  margin-bottom: 20px;
}

/* 平台概述 */
.overview-section {
  padding: 80px 0;
  background: white;
}

.overview-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.section-title {
  font-size: 36px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 30px;
}

.overview-description {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 40px;
}

.platform-stats {
  display: flex;
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #999;
}

.overview-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.platform-illustration {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tech-icon {
  font-size: 80px;
  animation: float 3s ease-in-out infinite;
}

.ai-icon {
  font-size: 40px;
  position: absolute;
  top: 20px;
  right: 20px;
  animation: pulse 2s infinite;
}

.detection-icon {
  font-size: 40px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  animation: bounce 2s infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* 使命愿景 */
.mission-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.mission-card, .vision-card {
  background: white;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  text-align: center;
}

.card-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 20px;
}

.card-description {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
}

/* 技术架构 */
.technology-section {
  padding: 80px 0;
  background: white;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.tech-category {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 15px;
  border-left: 4px solid #1e3c72;
}

.tech-category-title {
  font-size: 20px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 20px;
}

.tech-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tech-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  color: #666;
}

.tech-item:last-child {
  border-bottom: none;
}

/* 团队介绍 */
.team-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.team-member {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  text-align: center;
}

.member-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #1e3c72;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-placeholder {
  font-size: 24px;
  color: white;
  font-weight: bold;
}

.member-name {
  font-size: 20px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.member-position {
  font-size: 16px;
  color: #ff6b35;
  margin-bottom: 15px;
}

.member-description {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* 发展历程 */
.timeline-section {
  padding: 80px 0;
  background: white;
}

.timeline {
  position: relative;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #1e3c72;
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.timeline-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.timeline-date {
  width: 120px;
  padding: 10px 20px;
  background: #1e3c72;
  color: white;
  text-align: center;
  border-radius: 20px;
  font-weight: bold;
  position: relative;
  z-index: 2;
}

.timeline-content {
  flex: 1;
  padding: 20px 30px;
  background: #f8f9fa;
  border-radius: 15px;
  margin: 0 30px;
  position: relative;
}

.timeline-title {
  font-size: 20px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.timeline-description {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
}

/* 联系我们 */
.contact-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.contact-title {
  font-size: 24px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.contact-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e3c72;
  border-radius: 50%;
}

.contact-label {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.contact-value {
  font-size: 16px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: #1e3c72;
}

.form-textarea {
  height: 120px;
  resize: vertical;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #ff6b35;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.submit-btn:hover {
  background: #ff5722;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }
  
  .hero-subtitle {
    font-size: 20px;
  }
  
  .overview-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .platform-stats {
    justify-content: center;
  }
  
  .mission-vision-grid {
    grid-template-columns: 1fr;
  }
  
  .tech-grid {
    grid-template-columns: 1fr;
  }
  
  .team-grid {
    grid-template-columns: 1fr;
  }
  
  .timeline::before {
    left: 20px;
  }
  
  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 40px;
  }
  
  .timeline-item:nth-child(odd) {
    flex-direction: column;
  }
  
  .timeline-date {
    width: auto;
    margin-bottom: 15px;
  }
  
  .timeline-content {
    margin: 0;
    width: 100%;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
</style> 